<template>
  <a-card>
    <a-form layout="horizontal" autocomplete="off">
      <a-row type="flex" justify="start" :gutter="30">
        <a-col :md="14" :sm="24">
          <a-form-item>
            <a-space>
              <a-button type="primary" icon="save" @click="submit()" :loading="confirmLoading">{{$t('submit')}} [{{this.roleName}}]</a-button>
            </a-space>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-table :expandedRowKeys="expandedRowKeys" size="middle" :expandRowByClick="expandRowByClick" :columns="columns" :data-source="data" :row-key="record => record.funId" :loading="loading" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" @expand="expand">
      <div slot="funTypeName" slot-scope="text">
        {{ $t("funTypeName." + text) }}
      </div>
      <template v-for="(item, index) in columns" :slot="item.slotName">
        <span :key="index">{{ $t(item.slotName) }}</span>
      </template>
    </a-table>
  </a-card>
</template>

<script>
import {getFunList,getRoleFuns,saveRoleFuns} from '@/services/user'

export default {
  name: "RoleFuns",
  i18n: require('../i18n'),
  data () {
    return {
      data : [],
      columns:[
        {
          title: 'ID',
          dataIndex: 'funId',
          align:'left',
          width: '10%',
        },
        {
          dataIndex: 'funName',
          align:'left',
          slotName: 'name1',
          slots: { title: 'name1' },
        },
        {
          dataIndex: 'funType',
          align:'center',
          scopedSlots: { customRender: 'funTypeName' },
          slotName: "type",
          slots: { title: 'type' },
          width: '10%',
        },
        {
          title: 'Router',
          dataIndex: 'funRouter',
          align:'left',
          width: '10%',
        },
        {
          title: 'Url',
          dataIndex: 'funUrl',
          align:'left',
          width: '15%',
        },
        {
          dataIndex: 'funOrderby',
          align:'center',
          slotName: "sort",
          slots: { title: 'sort' },
          width: '10%',
        }
      ],
      expandRowByClick:true,
      expandedRowKeys: [],
      loading: false,
      confirmLoading: false,
      selectedRowKeys:[],
      roleName:"",
    }
  },
  methods: {
    expand(expanded, item) {
      if (!expanded) {
        this.expandedRowKeys.splice(this.expandedRowKeys.findIndex(i => i == item.funId),1);
      } else {
        this.expandedRowKeys.push(item.funId);
      }
    },
    fetchData(){
      this.loading = true
      getFunList().then(res => {
        this.data = res.data.data
        this.loading = false
        this.expandedRowKeys = this.data.map(item => item.funId)
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    getRoleFuns(){
      this.loading = true
      getRoleFuns(this.$route.params.roleid).then(res => {
        this.selectedRowKeys = res.data.data
        this.roleName = res.data.message
        this.loading = false
        this.$setPageTitle(this.$route, this.$t("set_role_funs") + "[" + this.roleName + "]")
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    submit(){
      this.confirmLoading = true
      saveRoleFuns(this.$route.params.roleid, this.selectedRowKeys).then(res => {
        if(res.data.success) {
          this.$message.success({content: this.$t('submitSuccess')})
          this.confirmLoading = false
        }else{
          this.$message.error({content: this.$t(res.data.message)})
        }
      }).catch(error => {
        console.log(error)
      })
    },
  },
  created() {
    this.fetchData()
    this.getRoleFuns()
    if(this.$route.params.roleid)
      this.$setPageTitle(this.$route, this.$t("set_role_funs") + "[" + this.$route.params.roleid + "]")
  }
}
</script>